<script setup>
import { ref, watch } from "vue";
// const data = [
//   {
//     title: '工序1',
//     locations: ['101-1', '101-2']
//   },
//   {
//     title: '工序2',
//     locations: ['101-3']
//   },
//   {
//     title: '工序3',
//     locations: ['101-4', '101-5']
//   },
//   {
//     title: '工序4',
//     locations: ['101-6', '101-7']
//   },
//   {
//     title: '工序5',
//     locations: ['101-8']
//   },
//   {
//     title: '工序6',
//     locations: ['101-9']
//   },
//   {
//     title: '工序7',
//     locations: ['101-10', '101-11']
//   },
//   {
//     title: '工序8',
//     locations: ['101-12', '101-13']
//   },
//   {
//     title: '工序9',
//     locations: ['101-14', '101-15']
//   },
//   {
//     title: '工序10',
//     locations: ['101-15', '101-16']
//   },
//   {
//     title: '工序11',
//     locations: ['101-16', '101-17']
//   },
//   {
//     title: '工序12',
//     locations: ['101-17', '101-18']
//   },
//   {
//     title: '工序13',
//     locations: ['101-19']
//   },
//   {
//     title: '工序14',
//     locations: ['101-20']
//   },
//   {
//     title: '工序15',
//     locations: ['101-20', '101-21']
//   },
//   {
//     title: '工序16',
//     locations: ['101-22']
//   }
// ]
const treeData = ref(props.data);

const props = defineProps({
  data: Array,
});

watch(
  () => props.data,
  (data) => {
    // console.log("🚀 ~ file: pathList.vue:77 ~ data:", data);
    treeData.value = data;
  },
  {
    deep: true,
  }
);
</script>

<template>
  <div class="pathContainer">
    <div class="pathContent">
      <div v-for="item in treeData" :key="item.key" class="pathItem">
        <div class="pathTitle">{{$t('basicData.process')}} {{ item.sort }}</div>
        <div class="locationBlock">
          <div
            v-for="location in item.children"
            :key="location.key"
            class="location"
          >
            {{ location.label }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.pathContainer {
  width: 800px;
  overflow-x: auto;
}

.pathContent {
  width: 800px;
  height: 260px;
  overflow: auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
}

.pathItem {
  display: flex;
  flex-direction: column;
  min-width: 120px;
}

.pathTitle {
  font-size: 14px;
  font-weight: normal;
  color: #333333;
  line-height: 16px;
  text-align: center;
  padding-bottom: 12px;
}

.locationBlock {
  padding: 8px;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #eaeaea;
  min-height: 200px;
}

.location {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 30px;
  background: #ffffff;
  border-radius: 2px 2px 2px 2px;
  border: 1px solid #dddddd;
}
</style>
